<template>
  <div class="ant-descriptions ant-descriptions-bordered">
    <div class="ant-descriptions-title">打卡计划</div>
    <div class="ant-table ant-table-scroll-position-left ant-table-middle ant-table-bordered">
      <div class="ant-table-content">
        <div class="ant-table-scroll">
          <!---->
          <div class="ant-table-body">
            <table class="">
              <thead class="ant-table-thead">
                <tr>
                  <th key="signInItem" class="" :style="{ textAlign: 'center' }">
                    <span class="ant-table-header-column">
                      <div>
                        <span class="ant-table-column-title">打卡项目</span
                        ><span class="ant-table-column-sorter"></span>
                      </div>
                    </span>
                  </th>
                  <th class="" v-for="day in weekItems" :key="day.id" :style="{ textAlign: 'center' }">
                    <span class="ant-table-header-column">
                      <div>
                        <span class="ant-table-column-title">
                          {{ day.title }}
                        </span>
                        <span class="ant-table-column-sorter"></span>
                      </div>
                    </span>
                  </th>
                </tr>
              </thead>
              <tbody class="ant-table-tbody">
                <tr class="ant-table-row ant-table-row-level-0" v-for="(item, index) in clockInItems" :key="index">
                  <td class="" style="width: 13%;" :style="{ textAlign: 'center' }">{{ item.title }}</td>
                  <td class="" v-for="(day, dindex) in weekItems" :key="dindex" :style="{ textAlign: 'center' }">
                    <span>{{ formatValue(item.title, day.id) }}</span>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SigninPlan',
  props: ['report'],
  data() {
    return {
      weekItems: [
        {
          id: 'signInJsonMonday',
          title: '星期一'
        },
        {
          id: 'signInJsonTuesday',
          title: '星期二'
        },
        {
          id: 'signInJsonWednesday',
          title: '星期三'
        },
        {
          id: 'signInJsonThursday',
          title: '星期四'
        },
        {
          id: 'signInJsonFriday',
          title: '星期五'
        },
        {
          id: 'signInJsonSaturday',
          title: '星期六'
        },
        {
          id: 'signInJsonSunday',
          title: '星期日'
        }
      ],
      clockInItems: [
        {
          id: '1+1',
          title: '空腹血糖'
        },
        {
          id: '1+2',
          title: '早餐后血糖'
        },
        {
          id: '1+3',
          title: '午餐前血糖'
        },
        {
          id: '1+4',
          title: '午餐后血糖'
        },
        {
          id: '1+5',
          title: '晚餐前血糖'
        },
        {
          id: '1+6',
          title: '晚餐后血糖'
        },
        {
          id: '1+7',
          title: '睡前血糖'
        },
        {
          id: '1+8',
          title: '凌晨血糖'
        },
        {
          id: '5+1',
          title: '早餐饮食'
        },
        {
          id: '5+2',
          title: '午餐饮食'
        },
        {
          id: '5+3',
          title: '晚餐饮食'
        },
        {
          id: '3+0',
          title: '运动'
        },
        {
          id: '4+1',
          title: '早用药'
        },
        {
          id: '4+2',
          title: '午用药'
        },
        {
          id: '4+3',
          title: '晚用药'
        },
        {
          id: '4+4',
          title: '睡前用药'
        },
        {
          id: '9+1',
          title: '早胰岛素'
        },
        {
          id: '9+2',
          title: '午胰岛素'
        },
        {
          id: '9+3',
          title: '晚胰岛素'
        },
        {
          id: '9+4',
          title: '睡前胰岛素'
        },
        {
          id: '10+0',
          title: '睡眠'
        },
        {
          id: '2+1',
          title: '早血压'
        },
        {
          id: '2+2',
          title: '晚血压'
        },
        {
          id: '8+0',
          title: '尿酮'
        },
        {
          id: '6+0',
          title: '体重'
        },
        {
          id: '7+0',
          title: '腰围'
        }
      ]
    }
  },
  methods: {
    formatValue(title, day) {
      if (this.report && this.report[day]) {
        let obj = this.report[day].find(function(value) {
          return value.item == title
        })

        if (obj.starttime) {
          return obj.starttime + ' - ' + obj.endtime
        } else {
          return ''
        }
      } else {
        return ''
      }
    }
  }
}
</script>

<style lang="less" scoped></style>
